<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随易租平台服务管理端</title>
    <link rel="shortcut icon" href="../../log.png">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/><!--el必要资源-->
    <link rel="stylesheet" href="../../styles/common.css">
    <link rel="stylesheet" href="../../styles/login.css">
    <link rel="stylesheet" href="../../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }
    </style>
</head>

<body>
<div class="login" id="login-app">
    <div class="left-div">
        <div class="left-img">
            <img src="../../left.png" alt="">
        </div>
    </div>

    <div class="right-div">
        <div class="login-form">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                <div class="login-form-title">
                    <img src="../../images/login/logo.png" style="width:100%;height:100%;" alt=""/>
                </div>
                <el-form-item prop="username" v-if="!login_error">
                    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
                              maxlength="20"
                              prefix-icon="iconfont icon-user"/>
                </el-form-item>
                <el-form-item prop="password" v-if="!login_error">
                    <el-input v-model="loginForm.password" type="password" placeholder="密码"
                              prefix-icon="iconfont icon-lock" maxlength="20"
                              @keyup.enter.native="handleLogin"/>
                </el-form-item>


                <el-form-item prop="phone" v-if="login_error">
                    <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号"
                              maxlength="20"
                              prefix-icon="iconfont icon-user"/>
                </el-form-item>
                <div class="ui-code" v-if="login_error">
                    <div class="ui-input-code">
                        <el-form-item prop="code">
                            <el-input v-model="loginForm.code" placeholder="验证码"
                                      prefix-icon="iconfont icon-lock" maxlength="20"
                                      @keyup.enter.native="handleLogin"/>
                        </el-form-item>
                    </div>

                    <div class="ui-bt-code">
                        <el-button class="login-code" type="primary"
                                   @click.native.prevent="handleCode"
                                   :disabled="!show"
                        >
                            <span v-show="show" class="getCode">获取验证码</span>
                            <span v-show="!show" class="count">{{count}}s后重新获取</span>
                        </el-button>
                    </div>
                </div>


                <el-form-item style="width:100%;">
                    <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
                               @click.native.prevent="handleLogin">
                        <span v-if="!loading">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
            <div class="ui-k">
                <button class="ui-k-button" @click="switchMode">
                    <span v-show="!login_error">快捷登录</span>
                    <span v-show="login_error">账号登录</span>
                </button>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>
<!--                    <a href="https://www.beian.gov.cn/portal/registerSystemInfo" target="_blank">公安备案号xxxxxxxxxxxxxx </a>-->
                </li>
                <li>
                    <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"> 桂ICP备2023000981号 </a>
                </li>
                <li>
                    <!--                    <a href="https://www.baidu.com/" target="_blank">京网文xxxxxxxxxxxxxxx号</a>-->
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/login.js"></script>

<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: null,
                    phone: '',
                    code: '',

                },
                loading: false,
                login_error: false,/*登录异常*/

                show: true,
                count: '',
                timer: null,
            }
        },
        computed: {
            loginRules() {
                return {
                    'username': [{'validator': validateUsername, 'trigger': 'blur'}],
                    'password': [{'validator': validatePassword, 'trigger': 'blur'}],
                    'phone': [{'validator': checkPhone, 'trigger': 'blur'}],
                    'code': [{'validator': validateCode, 'trigger': 'blur'}]
                }
            }
        },
        created() {
        },
        methods: {
            switchMode() {
                this.login_error = !this.login_error;
            },
            getCode() {
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
            handleCode() {
                if (this.loginForm.phone === '') {
                    this.$message.error("请输入手机号")
                } else {
                    let b = isCellPhone(this.loginForm.phone);
                    if (b === false) {
                        this.$message.error("请输入正确的手机号!");
                    } else {
                        codeApi(this.loginForm.phone).then(res => {
                            if (res.code === 1) {
                                this.getCode();

                                this.$message.success('验证码已发送')
                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        })
                    }
                }
            },
            async handleLogin() {
                if (this.login_error) {
                    this.$refs.loginForm.validate(async (valid) => {
                        if (valid) {
                            this.loading = true
                            let res = await loginCodeApi(this.loginForm)
                            if (String(res.code) === '1') {//1、登陆成功
                                localStorage.setItem('userInfo', JSON.stringify(res.data))
                                window.location.href = '../../index.html'
                                this.loading = false;
                            } else {
                                this.login_error = true;
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }
                    });

                } else {
                    this.$refs.loginForm.validate(async (valid) => {
                        if (valid) {
                            this.loading = true
                            let res = await loginApi(this.loginForm)
                            if (String(res.code) === '1') {//1、登陆成功
                                localStorage.setItem('userInfo', JSON.stringify(res.data))
                                window.location.href = '../../index.html'
                                this.loading = false;
                            } else {
                                if (String(res.code) === '-1') {
                                    this.login_error = true;
                                }
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }
                    });
                }

            }
        }
    })
</script>
</body>

</html>
